<template>
    <div>
        <h2>用户的编辑页面</h2>
        <textarea  v-model='content' cols="30" rows="10"></textarea>
        <button @click='saveContent'>保存</button>
        <ul>
            <li v-for='(item,index) in list' :key='index'>
                <h3>{{item.title}}</h3>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                content: '',
                list: [],
            }
        },
        methods: {
            saveContent() {
                this.list.push({
                    title:this.content
                })
                //清空文本的输入框
                this.content = '';
            }
        },
        beforeRouteLeave(to,form,next){
            if(this.content){
                // 用户体验
                alert('请确保保存信息之后离开');
                next(false);
            }else{
                next();
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>